<template>
  <div class="flex-col page section">
    <div class="flex-col">
      <c-title :hide="false" text="账号切换"></c-title>
    </div>
    <div class="flex-col group_2 mt-4-5">
      <div class="group_2-title flex-row justify-start">管理我的账号</div>
      <div class="flex-col self-stretch">
        <div class="flex-col list">
          <div @click="mobile_login(item)" class="flex-row justify-between relative mt-10" :class="item.uid == uid ? 'list-item-active' : 'list-item'" v-for="(item, index) in list" :key="index">
            <div class="current-account flex-row items-center justify-center" v-if="item.uid == uid">当前账号</div>
            <div class="flex-row items-center self-center flex-1">
              <div class="flex-row group_4 justify-between">
                <div class="flex-row items-center justify-start">
                  <img :src="item.avatar" style="width: 3rem; height: 3rem; border-radius: 50%" alt="" />
                  <div class="flex-col flex-1" style="width: 100%;margin-left: 1rem;">
                    <div class="font_3">{{ item.nickname }}</div>
                    <div>
                      <!-- <span class="font_6">用户id: </span> -->
                      <span class="font_6">{{ item.zhanghao }}</span>
                    </div>
                  </div>
                </div>
                <div class="flex-row mt-11 items-center">
                  <!-- <span v-if="item.uid == uid" class=" font_5">当前使用</span> -->
                  <span v-if="item.uid != uid" class=" font_7" @click.stop="loginout(item)">退出</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="GotoNewPage('nnAccountAdd')" class="group_2-btn flex-row items-center justify-center">
        <img class="group_2-btn-img" src="../../../assets/images/new/add-addount-icon.png" alt="" srcset="">
        <span>添加账号</span>
      </div>
    </div>
  </div>
</template>
        
  <script>
import accountListController from "./accountListController";

export default accountListController;
</script>
  <style>
body {
  background-color: #f5f5f5;
}
#app {
  background-color: #f5f5f5;
}
</style>
        
  <style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .van-nav-bar {
  border-bottom: none !important;
  background: #f5f5f5 !important;
}
::v-deep .van-button--default {
  background: none !important;
}
::v-deep .van-nav-bar__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #151515 !important;
}
//   @import "../common/common.css";
@import "../../../assets/css/commoncss/common.css";
.mt-4-5 {
  margin-top: 0.28rem;
}
.ml-5 {
  margin-left: 0.31rem;
}
.ml-7-5 {
  margin-left: 0.47rem;
}
.ml-3-5 {
  margin-left: 0.22rem;
}
.mt-11 {
  margin-top: 0.69rem;
}
.page {
  padding-bottom: 7.91rem;
  // background-color: #f5f7fa;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding-bottom: 0.094rem;
  padding-top: 0.594rem;
}
.section {
  //   background-color: #ffffff;
  //   background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
  background-size: 100% 100px;
  background-repeat: no-repeat;
}
.section_2 {
  background-image: linear-gradient(0deg, #f5f7fa 0%, #e5fcfa 99%, #e5fcfa 100%);
  height: 7.13rem;
}
.tabs-item:first-child {
  margin-right: 30px;
}
.tabs-item-active {
  position: relative;
}
.tabs-item-active::after {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  background-color: #008a7f;
  border-radius: 0.094rem;
  width: 1.06rem;
  height: 0.19rem;
}
.image {
  width: 20.47rem;
  height: 0.75rem;
}
.pos {
  position: absolute;
  right: 1.13rem;
  top: 1.03rem;
}
.image_2 {
  width: 0.63rem;
  height: 1.09rem;
}
.pos_3 {
  position: absolute;
  left: 0.59rem;
  bottom: 2.72rem;
}
.text {
  color: #222222;
  font-size: 1.13rem;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 1.06rem;
}
.pos_4 {
  position: absolute;
  left: 50%;
  bottom: 2.78rem;
  transform: translateX(-50%);
}
.section_3 {
  padding: 0.44rem 0.84rem;
  background-color: #ffffffe6;
  border-radius: 0.99rem;
  width: 5.47rem;
}
.pos_2 {
  position: absolute;
  right: 0.69rem;
  top: 2.94rem;
}
.image_3 {
  width: 1.94rem;
  height: 1.19rem;
}
.image_4 {
  width: 1.09rem;
  height: 1.09rem;
}
.text_2 {
  color: #222222;
  font-size: 1rem;
  font-family: PingFang SC;
  line-height: 0.97rem;
}
.pos_5 {
  position: absolute;
  left: 6.03rem;
  bottom: 0;
}
.text_3 {
  color: #999999;
  font-size: 0.94rem;
  font-family: PingFang SC;
  line-height: 0.88rem;
}
.pos_6 {
  position: absolute;
  right: 6.44rem;
  bottom: 0;
}
.group_2 {
  padding: 0.88rem;
  background: #fff;
}
.group_2-title{
  width: 100%;
}
.group_2-btn {
  width: 100%;
  background: #f5f5f5;
  margin-top: 1.5rem;
  padding: 0.75rem 0;
  border-radius: 0.5rem;
}
.group_2-btn-img {
  width: 25px;
  height: 25px;
  margin: 0;
  margin-right: 0.5rem;
}
.section_4 {
  margin-left: 6.44rem;
  background-color: #008a7f;
  border-radius: 0.094rem;
  width: 1.06rem;
  height: 0.19rem;
}
.group_3 {
  padding-top: 0.72rem;
}
.section_5 {
  padding: 1rem 0.84rem 0.78rem;
  background-image: linear-gradient(-49deg, #08c2b4 0%, #02cbba 100%);
  box-shadow: 0rem 0.38rem 0.56rem #08958a1a;
  border-radius: 0.5rem;
}
.image_5 {
  width: 1.22rem;
  height: 1.03rem;
}
.font {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.81rem;
  font-weight: 500;
  color: #ffffff;
}
.text_4 {
  line-height: 0.78rem;
}
.text_5 {
  line-height: 0.78rem;
}
.list {
  padding-top: 1rem;
}
.list-item {
  padding: 1.31rem 0.75rem 1.31rem 0.75rem;
  background-color: #f5f5f5;
  border-radius: 0.5rem;
}
.list-item:first-child {
  margin-top: 0;
}
.list-item-active {
  padding: 1.31rem 0.75rem 1.31rem 0.75rem;
  background-color: #fff9f9;
  border-radius: 0.5rem;
  border: 0.05rem solid #cd7167;
}
.current-account {
  width: 6rem;
  height: 2rem;
  border-radius: 0 0.5rem 0 1rem;
  background: #fee3e5;
  color: #de5c3a;
  position: absolute;
  right: 0;
  top: 0;
}
.image_6 {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
}
.group_4 {
  // width: 9.63rem;
  width: 100%;
  flex: 1;
}
.font_3 {
  font-size: 0.88rem;
  font-family: PingFang SC;
  //line-height: 0.81rem;
  font-weight: 500;
  color: #222222;
  max-width: 100%;
  word-break: break-all;
}
.font_4 {
  font-size: 0.69rem;
  font-family: PingFang SC;
  line-height: 0.53rem;
  color: #008a7f;
}
.group_5 {
  padding-left: 0.16rem;
}
.group_6 {
  //   padding-bottom: 0.13rem;
  //   width: 3rem;
}
.image_7 {
  width: 0.56rem;
  height: 0.53rem;
}
.font_6 {
  font-size: 0.8rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  color: #999999;
  white-space: nowrap;
}
.pos_8 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image_8 {
  width: 0.63rem;
  height: 0.63rem;
  margin: 0 2px;
}
.group_7 {
  // width: 5.84rem;
}
.image_9 {
  width: 0.56rem;
  height: 0.56rem;
}
.pos_9 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.font_5 {
  font-size: 0.9rem;
  font-family: PingFang SC;
  // line-height: 0.91rem;
  width: 7rem;
  word-break: break-all;
  color: #c30c0c;
}
.font_7 {
  font-size: 0.9rem;
    font-family: PingFang SC;
    max-width: 100%;
    word-break: break-all;
    color: #de5c3a;
    width: 5rem;
    height: 1.8rem;
    line-height: 1.8rem;
    text-align: center;
    border: 0.05rem solid #de5c3a;
    border-radius: 1rem;

}
.text-wrapper {
  padding: 0.5rem 0;
  background-image: linear-gradient(-90deg, #ff9100 0%, #ff9100 0%, #ffb421 100%);
  box-shadow: 0rem 0.063rem 0.23rem 0.015rem #ff920140;
  border-radius: 0rem 0.5rem 0rem 0.75rem;
  width: 3.53rem;
}
.pos_7 {
  position: absolute;
  right: 0;
  top: 0;
}
.font_2 {
  font-size: 0.81rem;
  font-family: PingFang SC;
  line-height: 0.69rem;
  font-weight: 500;
  color: #ffffff;
}
.text_6 {
  line-height: 0.72rem;
}
.bohui {
  width: 100%;
  color: red;
  font-size: 0.8rem;
}
.bohui-text {
  width: 80%;
  word-break: break-all;
  text-align: left;
}
</style>
        